<template>
  <div>
    <el-dialog title="添加商品信息" :visible.sync="dialogFormVisible" :show-close="false" width="55%" :center="true" custom-class="custom-dialog">
      <el-form :model="form" ref="form" label-position="left" :label-width="formLabelWidth">
        <el-form-item label="质检情况" prop="quality" :rules="[{ required: true, message: '请选择质检情况', trigger: 'change' }]">
          <el-radio-group v-model="form.quality">
            <el-radio label="0">优质</el-radio>
            <el-radio label="1">合格</el-radio>
            <el-radio label="2">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收货单位(本单位)" prop="traceName" :rules="[{ required: true, message: '请输入收货单位' }]">
          <el-input v-model="form.traceName" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="location" :rules="[{ required: true, message: '请输入单位地址' }]">
          <el-input v-model="form.location" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="$emit('popup', false)" round>取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" round>确 定</el-button>
      </div>
      <el-divider></el-divider>

      <!-- 商品详情信息 -->
      <TraceDetail :good-detail="good" :user="user" :block_pro="block_pro"/>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import TraceDetail from './TraceDetail.vue';

export default {
  components: {
    TraceDetail
  },
  data() {
    return {
      form: {
        traceName: '',
        quality: '',
        location: '',
        traceNumber: ''
      },
      formLabelWidth: '180px',
      scanData: '',
      testData: {
        '1000001': { 'traceName': '供应商单位1', 'quality': '1', 'location': '供应地点1' },
        '1000002': { 'traceName': '供应商单位2', 'quality': '2', 'location': '供应地点2' },
        '1000003': { 'traceName': '供应商单位3', 'quality': '0', 'location': '供应地点3' },
        '1000004': { 'traceName': '供应商单位4', 'quality': '1', 'location': '供应地点4' },
        '1000005': { 'traceName': '供应商单位5', 'quality': '2', 'location': '供应地点5' },
        '1000006': { 'traceName': '供应商单位6', 'quality': '0', 'location': '供应地点6' },
        '1000007': { 'traceName': '供应商单位7', 'quality': '1', 'location': '供应地点7' },
        '1000008': { 'traceName': '供应商单位8', 'quality': '2', 'location': '供应地点8' },
        '1000009': { 'traceName': '供应商单位9', 'quality': '0', 'location': '供应地点9' },
        '1000010': { 'traceName': '供应商单位10', 'quality': '1', 'location': '供应地点10' },
        '1000011': { 'traceName': '供应商单位11', 'quality': '2', 'location': '供应地点11' },
        '1000012': { 'traceName': '供应商单位12', 'quality': '0', 'location': '供应地点12' },
        '1000013': { 'traceName': '供应商单位13', 'quality': '1', 'location': '供应地点13' },
        '1000014': { 'traceName': '供应商单位14', 'quality': '2', 'location': '供应地点14' },
        '1000015': { 'traceName': '供应商单位15', 'quality': '0', 'location': '供应地点15' },
        '1000016': { 'traceName': '供应商单位16', 'quality': '1', 'location': '供应地点16' },
        '1000017': { 'traceName': '供应商单位17', 'quality': '2', 'location': '供应地点17' },
        '1000018': { 'traceName': '供应商单位18', 'quality': '0', 'location': '供应地点18' },
        '1000019': { 'traceName': '供应商单位19', 'quality': '1', 'location': '供应地点19' },
        '1000020': { 'traceName': '供应商单位20', 'quality': '2', 'location': '供应地点20' }
      }
    };
  },
  props: ['dialogFormVisible', 'good', 'user', 'block_pro'],
  mounted() {
    document.addEventListener('keydown', this.handleScannerInput);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleScannerInput);
  },
  methods: {
    handleScannerInput(event) {
      if (event.key !== 'Enter') {
        this.scanData += event.key;
      } else {
        this.fillFormData(this.scanData);
        this.scanData = ''; // Reset scan data for next scan
      }
    },
    fillFormData(traceNumber) {
      const data = this.testData[traceNumber];
      if (data) {
        this.form.traceName = data.traceName;
        this.form.quality = parseInt(data.quality);
        this.form.location = data.location;
        this.form.traceNumber = parseInt(traceNumber);
        this.form.distributorAddress = localStorage.getItem('account');
        axios({
          method: 'post',
          url: `/addDistribution`,
          data: this.form,
        }).then(response => {
          if (response.data.ret !== 1) {
            this.$message.error('提交失败,已经添加过了');
          } else {
            this.$blockInfo.setBlockInfo("Dis" + traceNumber, response.data.data);
            console.log("Dis" + traceNumber);
            console.log(this.$blockInfo.getBlockInfo("Dis" + traceNumber));
            this.$message.success('提交成功');
          }
        }).catch(error => {
          console.error('提交失败', error);
          this.$message.error('提交失败');
        });
      } else {
        console.error('没有找到对应的溯源码数据:', traceNumber);
        alert('扫描的溯源码无效，请重新扫描！');
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.$emit('confirmPopup', this.form);
          alert('表单提交成功！');
        } else {
          alert('表单数据有误，请检查！');
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>


.rounded-input {
  margin-left: -20px;
  border-radius: 5px;
  border: 1px solid #dcdfe6; /* 输入框边框样式 */
  padding: 3px; /* 调整内边距 */
}

.dialog-footer {
  text-align: center;
  margin-top: 20px;
}

.dialog-footer .el-button {
  margin-right: 10px;
  border-radius: 5px;
}
</style>
